<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
        <script type="text/javascript">
            function changedValues(){
                document.getElementById('formulario:width').value = screen.width;   // Captura ancho de la pantalla
                document.getElementById('formulario:height').value = screen.height; // Captura alto de la pantalla
                remoteChangeCommand();
            }
        </script>

        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />

        <!--<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>-->

    </h:head>
    <h:body>
        <h:outputStylesheet library="css" name="movil.css"/>  
        <h:outputStylesheet library="css" name="jquery.mobile-1.3.0.min.css"/>       
        <h:outputScript library="js" name="jquery.mobile-1.3.0.min.js"/>


        <h:form id="formulario" enctype="multipart/form-data">  

            <div data-role="page" id="page1">
                <div data-theme="a" data-role="header">
                    <table class="ui-btn-right" style="top: 0;margin-top: -9px;">
                        <tr>
                            <td>
                                <div class="contenedor">
                                    <p:fileUpload value="#{controladorLibros.archivoEntrante}"  
                                                  mode="simple"   
                                                  update="messages" styleClass="fileInput"/>                             <!-- FileChooser para subir los ebooks (PDF's)-->

                                    <p:growl id="messages" showDetail="true"/>
                                </div>  
                            </td>
                            <td>
                                <p:commandButton value="&uarr;" ajax="false" actionListener="#{controladorLibros.onSubirArchivo}"/>
                            </td>
                        </tr>
                    </table>
                    <h3>
                    </h3>
                </div>
                <div data-role="content">
                    <p:outputLabel value="Biblioteca" style="font-size: 150%"/>


                    <h:inputHidden id="width" value="#{controladorLibros.width}"/>      <!-- Mapear ancho de la pantalla-->
                    <h:inputHidden id="height" value="#{controladorLibros.height}"/>    <!-- Mapear alto de la pantalla-->
                    <h:inputHidden id="content" value="#{controladorLibros.contenidoPaginas}"/>    <!-- Mapear paginas de contenido-->

                    <p:remoteCommand name="remoteChangeCommand" process="width"/>       <!-- Procesar ancho de la pantalla-->
                    <p:remoteCommand name="remoteChangeCommand" process="height"/>      <!-- Procesar alto de la pantalla-->

                    <p:dataGrid var="book" value="#{controladorLibros.biblioteca}" columns="3" rows="9" >   <!-- Grilla para mostrar la biblioteca -->
                        <p:column>  
                            <p:commandLink onclick="changedValues()" 
                                           update="formulario"
                                           actionListener="#{controladorLibros.onClickCaratula}"      
                                           styleClass="portadas" ajax="false">
                                <p:graphicImage url="/resources/images/#{book.id}.png"  style="height: 7em !important; width: 100% !important; " alt="#{book.nombre}"/>
                                <f:attribute name="toRead" value="#{book}"/>
                            </p:commandLink>             

                            <p:outputLabel value="#{book.nombre}" style="font-size: small"/>


                        </p:column>  
                    </p:dataGrid>

                </div>

            </div>

        </h:form>  

    </h:body>
</html>

